<template>
    <div>
        <p>{{ now }}</p>
        <p>
            <button @click="handlePause">暂停</button>
            <button @click="handleResume">重新开始</button>
        </p>
    </div>
</template>

<script setup>
import { useNow } from '@vueuse/core';

const { now, pause, resume } = useNow({ controls: true });

const handlePause = () => {
    pause();
};

const handleResume = () => {
    resume();
};
</script>

<style lang="scss" scoped>

</style>